<template>
    <div>
        <h1>员工显示列表</h1>
        姓名
        <input type="text" v-model="w.name">
        角色
        <select v-model="w.role">
            <option value="">请选择</option>
            <option value="超级管理员">超级管理员</option>
            <option value="管理员">管理员</option>
            <option value="员工">员工</option>
        </select>
        <input type="button" value="查询" @click="Show">
        <input type="button" value="批量删除" @click="DellAll">
        <input type="button" value="批量禁用" @click="StateAll(0)">
        <input type="button" value="批量启用" @click="StateAll(1)">
        <table class="table table-bordered">
            <tr>
                <td><input type="checkbox" v-model="CheckAll" @click="QuanFan"></td>
                <td>头像</td>
                <td>员工编号</td>
                <td>姓名</td>
                <td>角色</td>
                <td>手机号码</td>
                <td>备注</td>
                <td>更新人</td>
                <td>最后更时间</td>
                <td>状态</td>
                <td>操作</td>
            </tr>
            <tr v-for="item in list">
                <td><input type="checkbox" :value="item.id" v-model="ids"></td>
                <td><img :src="item.wPhoto" alt="" width="70px" height="70px"></td>
                <td>{{ item.code }}</td>
                <td>{{ item.name }}</td>
                <td>{{ item.role }}</td>
                <td>{{ item.phone }}</td>
                <td>{{ item.tell }}</td>
                <td>{{ item.gpeople }}</td>
                <td>{{ item.updateTime }}</td>
                <td>{{ item.state == 0 ? "禁用" : "启用" }}</td>
                <td>
                    <input type="button" value="编辑" @click="Fan(item.id)">
                    <input type="button" value="删除" @click="Del(item.id)">
                </td>
            </tr>
        </table>
        总共<span>{{ data.zt }}</span>条
        每页<span>{{ w.size }}</span>条
        当前<span>{{ w.index }}</span>/<span>{{ data.zy }}</span>页
        <input type="button" value="首页" @click="FenYe('a')">
        <input type="button" value="上一页" @click="FenYe('b')">
        <span v-for="item in data.zy" @click="FenYe(item)">{{ item }}</span>
        <input type="button" value="下一页" @click="FenYe('c')">
        <input type="button" value="尾页" @click="FenYe('d')">
    </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import axios from 'axios';
import moment from 'moment';

let route = useRoute();
let router = useRouter();
let data: any = reactive({
    w: {
        "name": "",
        "role": "",
        index: 1,
        size: 2,
    },
    zt: 0,
    zy: 0,
    ids: [],
    list: [],
    CheckAll: false,
});
let { w, zt, zy, ids, list, CheckAll } = toRefs(data);
onMounted(() => {
    Show();
})
//显示
const Show = () => {

    let obj = {
        name: w.value.name,
        role: w.value.role,
        index: w.value.index,
        size: w.value.size,
    }
    axios({
        url: '/api/WorkeClass/WList',
        method: 'get',
        params: obj
    }).then((res) => {
        list.value = res.data.data,
            zt.value = res.data.zt,
            zy.value = res.data.zy
    })
}
//分页
const FenYe = (wf: any) => {
    switch (wf) {
        case 'a':
            if (w.value.index == 1) {
                alert("已经是第一页")
                return;
            }
            w.value.index = 1
            break;

        case 'b':
            if (w.value.index == 1) {
                alert("已经是第一页")
                return;
            }
            w.value.index--
            break;

        case 'c':
            if (w.value.index == data.zy) {
                alert("已经是最后一页")
                return;
            }
            w.value.index++
            break;

        case 'd':
            if (w.value.index == data.zy) {
                alert("已经是最后一页")
                return;
            }
            w.value.index = data.zy
            break;

        case wf:
            w.value.index = wf
            break;
    }
    Show();
}
//删除
const Del = (id: any) => {
    let res = confirm("确定删除吗？")
    let obj = {
        ids: id
    }
    if (res) {
        axios({
            url: '/api/WorkeClass/DellAll',
            method: 'delete',
            params: obj
        }).then((res) => {
            if (res.data.data == 1) {
                alert("删除成功")
                Show();
            }
            else {
                alert("删除失败")
                return;
            }
        })
    }
}
//全选反选
const QuanFan = () => {
    CheckAll.value = !CheckAll.value
    if (CheckAll.value == true) {
        ids.value = list.value.map((item: any) => {
            return item.id
        })
    }
    else {
        ids.value = []
    }
}
//批量修改状态
const StateAll = (state: any) => {
    if (ids.value.length <= 0) {
        alert("请选择要修改的数据")
        return;
    }
    let res = confirm("确人修改状态吗?")

    let obj = {
        ids: ids.value.toString(),
        state: state
    }
    if (res) {
        axios({
            url: '/api/WorkeClass/StateAll',
            method: 'put',
            params: obj
        }).then((res) => {
            if (res.data.data == 1) {
                alert("修改成功")
                CheckAll.value = false
                
                Show();
            }
            else {
                alert("修改失败")
                return;
            }
        })
    }

}
//批量删除
const DellAll = () => {
    if (ids.value.length <= 0) {
        alert("请选择要修改的数据")
        return;
    }
    let res = confirm("确人修改状态吗?")

    let obj = {
        ids: ids.value.toString(),

    }
    if (res) {
        axios({
            url: '/api/WorkeClass/DellAll',
            method: 'delete',
            params: obj
        }).then((res) => {
            if (res.data.data == 1) {
                alert("批量删除成功")
                CheckAll.value = false
                Show();
            }
            else {
                alert("批量删除失败")
                return;
            }
        })
    }
}
//反填跳转页面
const Fan = (id: any) => {
    router.push({
        path: '/upd',
        query: {
            id: id
        }
    })
}
</script>

<style scoped>
span {
    color: red;
}
</style>